<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="index.css">
    <title>首页</title>
</head>
<body>
    <section class="gallery">
        <div class="container">
            <div class="row">
                <div class="gallery-filter">
                    <span class="filter-item active" data-filter="all">所有</span>
                    <span class="filter-item" data-filter="tools">工具</span>
                    <span class="filter-item" data-filter="layout">布局</span>
                    <span class="filter-item" data-filter="game">2d游戏</span>
                </div>
            </div>
            <div class="row">
                <div class="gallery-item thumbnail tools">
                    <div class="gallery-item-inner">
                        <a href="http://superjackkk.xyz/web-projects/formWare" target="blank"><img src="http://superjackkk.xyz/web-projects/formWare/demo.png" title="login登入页面"></a>
                    </div>
                </div>
                <div class="gallery-item thumbnail tools">
                    <div class="gallery-item-inner">
                        <a href="http://superjackkk.xyz/web-projects/animatedNavigation" target="blank"><img src="http://superjackkk.xyz/web-projects/animatedNavigation/demo.png" title="旋转导航栏"></a>
                    </div>
                </div>
                <div class="gallery-item thumbnail game">
                    <div class="gallery-item-inner">
                        <a href="http://superjackkk.xyz/web-projects/Tetris" target="blank"><img src="http://superjackkk.xyz/web-projects/Tetris/demo.png" title="俄罗斯方块"></a>
                    </div>
                </div>
                <div class="gallery-item thumbnail tools">
                    <div class="gallery-item-inner">
                        <a href="http://superjackkk.xyz/web-projects/todoList" target="blank"><img src="http://superjackkk.xyz/web-projects/todoList/demo.png" title="待办事项"></a>
                    </div>
                </div>
                <div class="gallery-item thumbnail layout">
                    <div class="gallery-item-inner">
                        <a href="http://superjackkk.xyz/web-projects/expandingCards" target="blank"><img src="http://superjackkk.xyz/web-projects/expandingCards/demo.png" title="动态展示"></a>
                    </div>
                </div>
                <div class="gallery-item thumbnail tools">
                    <div class="gallery-item-inner">
                        <a href="http://superjackkk.xyz/web-projects/fapCollapse" target="blank"><img src="http://superjackkk.xyz/web-projects/fapCollapse/demo.png" title="问答窗口"></a>
                    </div>
                </div>
                <div class="gallery-item thumbnail layout">
                    <div class="gallery-item-inner">
                        <a href="http://superjackkk.xyz/web-projects/qingzhu" target="blank"><img src="http://superjackkk.xyz/web-projects/qingzhu/demo.png" title="青竹商城"></a>
                    </div>
                </div>
                <div class="gallery-item thumbnail tools">
                    <div class="gallery-item-inner">
                        <a href="http://superjackkk.xyz/web-projects/getJokes" target="blank"><img src="http://superjackkk.xyz/web-projects/getJokes/demo.png" title="冷笑话"></a>
                    </div>
                </div>
                <div class="gallery-item thumbnail tools">
                    <div class="gallery-item-inner">
                        <a href="http://superjackkk.xyz/web-projects/hiddenSearch" target="blank"><img src="http://superjackkk.xyz/web-projects/hiddenSearch/demo.png" title="隐藏搜索框"></a>
                    </div>
                </div>
                <div class="gallery-item thumbnail tools">
                    <div class="gallery-item-inner">
                        <a href="http://superjackkk.xyz/web-projects/JSclock" target="blank"><img src="http://superjackkk.xyz/web-projects/JSclock/demo.png" title="js时钟"></a>
                    </div>
                </div>
                <div class="gallery-item thumbnail tools">
                    <div class="gallery-item-inner">
                        <a href="http://superjackkk.xyz/web-projects/progressSteps" target="blank"><img src="http://superjackkk.xyz/web-projects/progressSteps/demo.png" title="步骤动画效果"></a>
                    </div>
                </div>
                <div class="gallery-item thumbnail tools">
                    <div class="gallery-item-inner">
                        <a href="http://superjackkk.xyz/web-projects/randomChoicePicker" target="blank"><img src="http://superjackkk.xyz/web-projects/randomChoicePicker/demo.png" title="随机选择事件"></a>
                    </div>
                </div>
                <div class="gallery-item thumbnail tools">
                    <div class="gallery-item-inner">
                        <a href="http://superjackkk.xyz/web-projects/rotatingNavigation" target="blank"><img src="http://superjackkk.xyz/web-projects/rotatingNavigation/demo.png" title="旋转页面"></a>
                    </div>
                </div>
                <div class="gallery-item thumbnail tools">
                    <div class="gallery-item-inner">
                        <a href="http://superjackkk.xyz/web-projects/blurryLoading" target="blank"><img src="http://superjackkk.xyz/web-projects/blurryLoading/demo.png" title="模糊加载"></a>
                    </div>
                </div>
                <div class="gallery-item thumbnail tools">
                    <div class="gallery-item-inner">
                        <a href="http://superjackkk.xyz/web-projects/scrollAnimation" target="blank"><img src="http://superjackkk.xyz/web-projects/scrollAnimation/demo.png" title="滚动加载"></a>
                    </div>
                </div>
                <div class="gallery-item thumbnail tools">
                    <div class="gallery-item-inner">
                        <a href="http://superjackkk.xyz/web-projects/soundBoard" target="blank"><img src="http://superjackkk.xyz/web-projects/soundBoard/demo.png" title="声音面板"></a>
                    </div>
                </div>
                <div class="gallery-item thumbnail layout">
                    <div class="gallery-item-inner">
                        <a href="http://superjackkk.xyz/web-projects/splitLandingPage" target="blank"><img src="http://superjackkk.xyz/web-projects/splitLandingPage/demo.png" title="分割展示"></a>
                    </div>
                </div>
                <div class="gallery-item thumbnail tools">
                    <div class="gallery-item-inner">
                        <a href="http://superjackkk.xyz/web-projects/eventKeycode" target="blank"><img src="http://superjackkk.xyz/web-projects/eventKeycode/demo.png" title="键盘编码"></a>
                    </div>
                </div>
            </div>
        </div>
        <div class="footer">
            <div class="container">
                <p>这是supjackkk的前端展示仓库</p>
            </div>
        </div>
    </section>
    <script src="./index.js"></script>
</body>

</html>